<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//  受react状态控制的组件我们称之为受控组件
class App extends React.Component{
    state={
        msg:"好好学习天天向上",
        sex:"男",
        jobType:""
    }
    render(){
        return (
            <div>
                <h1>受控组件</h1>
                <div>
                    <h2>{this.state.msg}</h2>
                    {
                        // onChange和原生onchange事件有所不同，原生onchange事件只有当输入框内容发生改变并且失去焦点时才会触发，onChange事件只要输入框内容发生改变了那么就会触发类似与原生事件的input事件
                    }
                   <input type="text" value={this.state.msg} onChange={(e)=>{
                        // 获取输入框最新内容 e.target.value
                        this.setState({
                            msg:e.target.value
                        })
                        // 
                   }}/>  
                   <button onClick={()=>{
                    console.log(this.state.msg)
                   }}>获取输入框内容</button>  
                   <button onClick={()=>{
                    this.setState({
                        msg:"嘿嘿嘿"
                    })
                   }}>修改输入框默认值</button>
                   <div>
                     选择您的性别： {this.state.sex}
                     <input type="radio" name='sex' value="男" checked={this.state.sex==='男'} onChange={(e)=>{
                        this.setState({
                            sex:e.target.value
                        })
                     }}/> 男
                     <input type="radio" name='sex' value="女" checked={this.state.sex==='女'} onChange={(e)=>{
                        this.setState({
                            sex:e.target.value
                        })
                     }}/> 女
                    </div>
                </div>
                <div>
                请选择您的岗位： {this.state.jobType}
                 <select value={this.state.jobType} onChange={(e)=>{
                    console.log(e.target.value)
                    this.setState({
                        jobType:e.target.value
                    })
                 }}>
                  <option value="">请选择</option>
                  <option value="前端开发工程师">前端开发工程师</option>
                  <option value="java开发工程师">java开发工程师</option>
                  <option value="ui工程师">ui工程师</option>
                </select>    
                </div>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById("root"))
</script>
</html>